<div class="row home">
    <div class="col-md-12">
        <!-- Slogan & Headline -->
        <h1 class="slogan-master text-center">{{ 'APP.HOME.HEADLINE.SLOGAN.FIRST' | translate:slogan }}</h1>
        <h2 class="slogan-slave text-center">
            <small>{{ 'APP.HOME.HEADLINE.SLOGAN.SECOND' | translate }}</small>
        </h2>
        <div class="text-center md-pt-10">
            <button class="btn btn-success" ui-sref="main.dyn.docgettingstarted">
                {{ 'APP.HOME.BUTTON.GETSTARTED' | translate }}
            </button>
            <button class="btn btn-primary" ui-sref="main.dyn.tutorials">
                {{ 'APP.HOME.BUTTON.TUTORIALS' | translate }}
            </button>
        </div>
        <hr class="sm-mt-40 sm-mb-40" />
        <!-- Selling points -->
        <div class="row">
            <div class="col-md-4">
                <div class="md-pl-15 md-pr-15">
                    <div class="media">
                        <div class="media-left">
                            <i class="media-icon fa fa-sitemap"></i>
                        </div>
                        <div class="media-right media-middle">
                            <h4 class="media-heading" translate="APP.HOME.LABEL.KEYFACT.1.HEADLINE" translate-compile></h4>
                        </div>
                    </div>
                    <span class="key-fact-details" translate="APP.HOME.LABEL.KEYFACT.1.DETAILS" translate-compile></span>
                </div>
            </div>
            <div class="col-md-4 lg-mt-0 sm-mt-20">
                <div class="md-pl-15 md-pr-15">
                    <div class="media">
                        <div class="media-left">
                            <i class="media-icon fa fa-book"></i>
                        </div>
                        <div class="media-right media-middle">
                            <h4 class="media-heading" translate="APP.HOME.LABEL.KEYFACT.2.HEADLINE" translate-compile></h4>
                        </div>
                    </div>
                    <span class="key-fact-details" translate="APP.HOME.LABEL.KEYFACT.2.DETAILS" translate-compile></span>
                </div>
            </div>
            <div class="col-md-4 lg-mt-0 sm-mt-20">
                <div class="md-pl-15 md-pr-15">
                    <div class="media">
                        <div class="media-left">
                            <i class="media-icon fa fa-puzzle-piece"></i>
                        </div>
                        <div class="media-right media-middle">
                            <h4 class="media-heading" translate="APP.HOME.LABEL.KEYFACT.3.HEADLINE" translate-compile></h4>
                        </div>
                    </div>
                    <span class="key-fact-details" translate="APP.HOME.LABEL.KEYFACT.3.DETAILS" translate-compile></span>
                </div>
            </div>
        </div>
        <div class="row lg-mt-30 sm-mt-20">
            <div class="col-md-4">
                <div class="md-pl-15 md-pr-15">
                    <div class="media">
                        <div class="media-left">
                            <i class="media-icon fa fa-battery-full"></i>
                        </div>
                        <div class="media-right media-middle">
                            <h4 class="media-heading" translate="APP.HOME.LABEL.KEYFACT.4.HEADLINE" translate-compile></h4>
                        </div>
                    </div>
                    <span class="key-fact-details" translate="APP.HOME.LABEL.KEYFACT.4.DETAILS" translate-compile></span>
                </div>
            </div>
            <div class="col-md-4 lg-mt-0 sm-mt-20">
                <div class="md-pl-15 md-pr-15">
                    <div class="media">
                        <div class="media-left">
                            <i class="media-icon fa fa-check"></i>
                        </div>
                        <div class="media-right media-middle">
                            <h4 class="media-heading" translate="APP.HOME.LABEL.KEYFACT.5.HEADLINE" translate-compile></h4>
                        </div>
                    </div>
                    <span class="key-fact-details" translate="APP.HOME.LABEL.KEYFACT.5.DETAILS" translate-compile></span>
                </div>
            </div>
            <div class="col-md-4 lg-mt-0 sm-mt-20">
                <div class="md-pl-15 md-pr-15">
                    <div class="media">
                        <div class="media-left">
                            <i class="media-icon fa fa-cogs"></i>
                        </div>
                        <div class="media-right media-middle">
                            <h4 class="media-heading" translate="APP.HOME.LABEL.KEYFACT.6.HEADLINE" translate-compile></h4>
                        </div>
                    </div>
                    <span class="key-fact-details" translate="APP.HOME.LABEL.KEYFACT.6.DETAILS" translate-compile></span>
                </div>
            </div>
        </div>
        <hr class="sm-mt-40 sm-mb-15" />
        <div class="row">
            <!-- Introduction video -->
            <div class="col-md-8">
                <h3 class="text-center">{{ 'APP.HOME.HEADLINE.HOWITWORKS' | translate }}</h3>
                <div class="text-center">
                    <script type="text/javascript" src="https://asciinema.org/a/cantr04assr4jkv8v34uz9b8r.js"
                            id="asciicast-cantr04assr4jkv8v34uz9b8r" async>
                    </script>
                </div>
            </div>
            <!-- Recent news -->
            <div class="col-md-4">
                <h3 class="text-center">{{ 'APP.HOME.HEADLINE.WHATSNEW' | translate }}</h3>
                <div class="list-group md-mt-20">
                    <a ng-repeat="post in news" ui-sref="main.news({file: post.slug})" class="list-group-item"
                       ng-class="{active: $first}">
                        <div class="clearfix">
                            <h4 class="list-group-item-heading pull-left">{{ post.title}}</h4>
                            <p class="list-group-item-text pull-right">{{ post.date}}</p>
                        </div>
                        <p class="list-group-item-text">{{ post.shortDesc}}</p>
                    </a>
                </div>
            </div>
        </div>
        <hr class="sm-mb-30" />
        <!-- Orientation helper -->
        <div class="row">
            <div class="col-md-4">
                <div class="md-pl-15 md-pr-15">
                    <h4>
                        <i class="fa fa-plug"></i>
                        <span class="md-pl-10">{{ 'APP.HOME.LABEL.ORIENTATION.1.HEADLINE' | translate }}</span>
                    </h4>
                    <span translate="APP.HOME.LABEL.ORIENTATION.1.DETAILS" translate-compile>
                    </span>
                </div>
            </div>
            <div class="col-md-4 lg-mt-0 sm-mt-20">
                <div class="md-pl-15 md-pr-15">
                    <h4>
                        <i class="fa fa-code"></i>
                        <span class="md-pl-10">{{ 'APP.HOME.LABEL.ORIENTATION.2.HEADLINE' | translate }}</span>
                    </h4>
                    <span translate="APP.HOME.LABEL.ORIENTATION.2.DETAILS" translate-compile>
                    </span>
                </div>
            </div>
            <div class="col-md-4 lg-mt-0 sm-mt-20">
                <div class="md-pl-15 md-pr-15">
                    <h4>
                        <i class="fa fa-question-circle-o"></i>
                        <span class="md-pl-10">{{ 'APP.HOME.LABEL.ORIENTATION.3.HEADLINE' | translate }}</span>
                    </h4>
                    <span translate="APP.HOME.LABEL.ORIENTATION.3.DETAILS" translate-compile>
                    </span>
                </div>
            </div>
        </div>
		<div class="row lg-mt-30 sm-mt-10">
			<div class="col-md-8">
				<div class="md-pl-15 md-pr-15">
					<h4>
						<i class="fa fa-share-alt"></i>
						<span class="md-pl-10">{{ 'APP.HOME.LABEL.ORIENTATION.4.HEADLINE' | translate }}</span>
					</h4>
					<p translate="APP.HOME.LABEL.ORIENTATION.4.DETAILS" translate-compile></p>
				</div>
			</div>
			<div class="col-md-4 lg-mt-0 sm-mt-20">
				<div class="md-pl-15 md-pr-15">
					<h4>
						<i class="fa fa-bolt"></i>
						<span class="md-pl-10">{{ 'APP.HOME.LABEL.ORIENTATION.5.HEADLINE' | translate }}</span>
					</h4>
					<p translate="APP.HOME.LABEL.ORIENTATION.5.DETAILS" translate-compile></p>
				</div>
			</div>
		</div>
		<hr class="sm-mt-30 sm-mb-40" />
		<div class="row">
			<div class="col-md-6">
				<img src="website/img/qtgui.png" style="width:100%" />
			</div>
			<div class="col-md-6 lg-mt-0 sm-mt-20">
				<h4>{{ 'APP.HOME.LABEL.TOOL.QTGUI.HEADLINE' | translate }}</h4>
				<p translate="APP.HOME.LABEL.TOOL.QTGUI.DETAILS" translate-compile></p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4 sm-mt-20">
				<h4>{{ 'APP.HOME.LABEL.TOOL.WEBGUI.HEADLINE' | translate }}</h4>
				<p translate="APP.HOME.LABEL.TOOL.WEBGUI.DETAILS" translate-compile></p>
			</div>
			<div class="col-md-8 sm-mt-20">
				<img src="website/img/web-gui-kdb.png" style="width:100%" />
			</div>
		</div>
		<div class="row">
			<div class="col-md-6 sm-mt-20">
				<img src="website/img/oyranos-kolor-manager.png" style="width:100%" />
			</div>
			<div class="col-md-6 sm-mt-20">
				<h4>{{ 'APP.HOME.LABEL.TOOL.OTHERS.HEADLINE' | translate }}</h4>
				<p translate="APP.HOME.LABEL.TOOL.OTHERS.DETAILS" translate-compile></p>
			</div>
		</div>
    </div>
</div>
